<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 40px;
            background-color: red;
            margin: 10px;
            transition: all 0.5s;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        /* 
        需求：点击盒子，如果当前盒子是收起的，就展开盒子；如果当前盒子是展开的，就收起盒子
        */

        // 1、获取元素
        var oDiv = document.querySelectorAll("div");

        // 2、加事件 --- 点击
        for(var i=0;i<oDiv.length;i++){
            // 自定义属性
            oDiv[i].tag = true; // 假设true是收起   

            oDiv[i].onclick = function(){
                // 3、做什么事---如果当前盒子是收起的，就展开盒子；如果当前盒子是展开的，就收起盒子

                // 先判断
                if(this.tag == true){
                    // 展开盒子 ---高度变高
                    this.style.height = '100px';
                    this.tag = false;
                }else{
                    this.style.height = '40px';
                    this.tag = true;
                }
            }
        }


    </script>
</body>
</html>